<!--
 * @Author: Qimu
 * @Date: 2020-06-26 01:38:18
 * @LastEditors: Qimu
 * @LastEditTime: 2020-07-09 19:55:45
 * @Description: file content
 * @FilePath: \vue-admin-koa2\vue-admin\src\views\Article\Article.vue
--> 
<template>
  <div class="article">
    <!-- 内容区域 start-->
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="5">
          <!-- <el-input placeholder="请输入内容" size="mini" clearable @clear="getUserList"> -->
          <!--  v-model="queryInfo.query" -->
          <!-- <el-button slot="append" icon="el-icon-search" size="mini" @click="getUserList"></el-button>
          </el-input>-->
        </el-col>
        <el-col :span="4">
          <router-link to="/article/addArticle">
            <el-button type="primary" size="mini">添加文章</el-button>
            <!-- <el-button type="primary" size="mini" @click="dialog = true">添加文章</el-button> -->
          </router-link>
        </el-col>
      </el-row>

      <!-- 文章列表区域 start-->
      <el-table :data="articleList" border size="small">
        <el-table-column align="center" label="#" type="index"></el-table-column>
        <!-- <el-table-column align="center" label="标题图" prop="admin_avatar">
          <template slot-scope="scope">
            <el-avatar
              v-if="scope.row.admin_avatar"
              shape="circle"
              :size="50"
              :src="scope.row.admin_avatar"
            ></el-avatar>
          </template>
        </el-table-column>-->
        <el-table-column align="center" label="文章题目" prop="article_title"></el-table-column>
        <!-- <el-table-column align="center" label="作者" prop="admin_email"></el-table-column> -->
        <!-- <el-table-column align="center" label="是否原创" prop="admin_tel"></el-table-column> -->
        <el-table-column align="center" label="分类" prop="article_category"></el-table-column>
        <el-table-column align="center" label="标签" prop="article_tagValue"></el-table-column>
        <el-table-column align="center" label="内容" show-overflow-tooltip prop="article_content"></el-table-column>
        <!-- <el-table-column align="center" label="浏览数" prop="last_loginTime"></el-table-column> -->
        <!-- <el-table-column align="center" label="开启评论" prop="last_loginTime"></el-table-column> -->
        <el-table-column align="center" label="发布状态" prop="article_isPublish"></el-table-column>
        <el-table-column align="center" label="创建时间" prop="article_createTime"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditAdminDialog(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteAdminDialog(scope.row)"
            ></el-button>
            <el-button
              type="success"
              icon="el-icon-s-platform"
              size="mini"
              @click="articlePreview(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 文章列表区域 end-->

      <!-- 分页 -->
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>-->
    </el-card>
    <!-- 内容区域 end-->
  </div>
</template>

<script>
import utils from '../../plugins/utils'
import { mapGetters } from 'vuex'

export default {
  components: {
    // EditAdminDialog: () => import('@/components/EditAdmin/EditAdmin.vue')
  },
  props: {},
  data() {
    return {
      articleList: [],
      // queryInfo: {
      //   //文章数据列表请求参数
      //   query: '', //查询参数
      //   pagenum: 1, //当前页码
      //   pagesize: 4 //每页显示条数
      // },
      // total: 0, //列表数据总条数
      activeColor: '#13ce66', //状态开关颜色
      dialog: false, //控制抽屉的隐藏和显示
      loading: false
      // avatarImg: '', //文章头像预览
      // //新增文章信息表单
      // setAdminform: {
      //   admin_name: '', //文章名字
      //   admin_password: '', //文章密码
      //   admin_email: '', //文章邮箱
      //   admin_avatar: '', //文章头像
      //   admin_tel: '', //文章电话
      //   admin_status: 1 //文章状态
      // },
    }
  },
  created() {
    this.getArticleList()
  },
  computed: {
    // ...mapGetters(['adminList'])
  },
  methods: {
    //获取文章列表请求
    async getArticleList() {
      // if (!utils.local.get('adminList')) {
      const { data: res } = await this.$api.article.articleList()
      console.log('res', res)
      if (res.meta.status !== 200) {
        this.$message.error({ message: res.meta.message })
      } else {
        this.articleList = res.data
        // this.$store.commit('adminList', res.data)
        // this.total = res.data.total
      }
      // }
    },

    //预览文章
    async articlePreview(article) {
      this.$router.push({ path: `/article/articleDetail/${article._id}` })
    }

    //修改文章状态
    // async changeAdminState(adminState) {
    //   const { data: res } = await this.$api.admin.adminState({
    //     _id: adminState._id, //文章ID
    //     admin_name: adminState.admin_name, //文章名称
    //     admin_status: adminState.admin_status //文章状态
    //   })
    //   if (res.meta.status !== 200) {
    //     adminState.admin_status = !adminState.admin_status
    //     this.$message.error({ message: res.meta.message }) //当前文章设置保存失败
    //   } else {
    //     this.$message.success({ message: res.meta.message }) //当前文章状态修改成功
    //     this.$store.dispatch('getadminList')
    //   }
    // }

    //编辑文章对话框点击显示事件
    // showEditAdminDialog(admin) {
    //   const data = {
    //     _id: admin._id,
    //     admin_name: admin.admin_name,
    //     admin_email: admin.admin_email,
    //     admin_tel: admin.admin_tel
    //   }
    //   this.editAdminFormCom.editAdminForm = data //父组件传值子组件
    //   this.editAdminFormCom.editAdminDialogVisible = true
    // },

    //编辑文章对话框的提交事件
    // async confirmEditAdmin(data) {
    //   const { data: res } = await this.$api.admin.putEditAdmin(data)
    //   if (res.meta.status !== 200) {
    //     return this.$message.error({ message: res.meta.message })
    //   } else {
    //     this.$message.success({ message: res.meta.message })
    //     this.$store.dispatch('getadminList')
    //   }
    // },

    //删除选中文章
    // async deleteAdminDialog(del) {
    //   await this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(async () => {
    //       const { data: res } = await this.$api.admin.deleteAdmin({
    //         _id: del._id
    //       })
    //       if (res.meta.status !== 200) {
    //         return this.$message.error({ message: res.meta.message })
    //       } else {
    //         this.$message.success({ message: res.meta.message })
    //         this.$store.dispatch('getadminList')
    //       }
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '已取消文章删除'
    //       })
    //     })
    // },

    //抽屉功能
    // handleClose(done) {
    //   this.loading = false
    //   this.dialog = false
    // },

    // cancelForm() {
    //   this.loading = false
    //   this.dialog = false
    // }

    //页码大小
    // handleSizeChange(newSize) {
    //   this.queryInfo.pagesize = newSize
    //   this.getUserList()
    // },

    //当前页变动
    // handleCurrentChange(newPage) {
    //   this.queryInfo.pagenum = newPage
    //   this.getUserList()
    // },
  }
}
</script>
<style lang="sass" scoped>
.drawer_content
  padding-left: 15px
  .el-form
    width: 600px
    padding: 15px
    .el-input,.el-select
      width: 150px

.el-drawer
  outline: none
  height: 100%

.demo-drawer__footer
  margin-left: 20px
</style>